<script setup lang="ts">
import { useUserStore } from '~/stores/user'
const userStore = useUserStore()
</script>

<template>
    <div id="mainLayout" class="h-screen">
        <div class="w-full max-w-[500px] mx-auto">
            <div id="topMenu" class="w-full flex items-center justify-center px-2 h-10 my-2">
                <img src="~/public/threads-logo.png" alt="logo" class="w-[35px]">
            </div>
        </div>

        <div class="flex w-full max-w-[500px] mx-auto h-screen pb-[123px]">
            <slot></slot>
        </div>

        <div id="bottomNav" class="fixed z-50 bottom-0 flex w-full h-[70px] border-t border-t-gray-700 bg-black">
            <div class="w-full max-w-[500px] mx-auto flex items-center justify-around">
                <button class="w-full h-full" @click="()=> navigateTo('/')">
                    <Icon name="material-symbols:home-outline" size="35" class="text-[#ffffff]"/>
                </button>
                <button class="w-full h-full" @click="()=> userStore.isMenuOverlay = true">
                    <Icon name="material-symbols:edit-square-outline-rounded" size="32" class="mb-1 text-[#ffffff]"/>
                </button>
                <button class="w-full h-full" @click="()=> userStore.isLogoutOverlay = true">
                    <Icon name="ph:sign-out" size="32" class="mb-1 text-[#ffffff]"/>
                </button>
            </div>
        </div>
    </div>
</template>

<style scoped>

</style>